<template>
	<view>
		<view class="time-line-container">
			<view v-for="item in timeLineList" :key="item.month" class="time-line-item">
				<text class="time-line-month">{{ item.month }}</text>
				<blog-steps :info-list="item.list" color="#55aa7f" @click="clickItem"></blog-steps>
			</view>
		</view>
	</view>
</template>

<script>
import blogApi from '@/api/blog.js';
export default {
	data() {
		return {
			timeLineList: []
		};
	},
	onShow() {
		this.getTimeLine();
	},
	methods: {
		clickItem(e) {
			const id = e.blogId;
			uni.navigateTo({
				url: '/pages/blog-info/blog-info?id=${id}'
			});
		},
		getTimeLine() {
			blogApi.getTimeLine().then(res => {
				this.timeLineList = res.data;
			});
		}
	}
};
</script>

<style>
.time-line-month {
	font-size: 32rpx;
	margin-left: 40rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
	border: 1rpx solid #2c405a;
	padding: 20rpx;
}
.time-line-container {
	margin-top: 50rpx;
	margin-bottom: 50rpx;
}
.time-line-item {
	margin: 20rpx 0rpx;
}
</style>
